<template>
    <div class="chart-container">
        <div class="chart-title-wrapper">
            <div class="chart-title-block"></div>
            <div class="chart-title" style="opacity:1;">各区域项目启动率</div>
            
        </div>
        <div class="chart-content-wrapper">
            <div id="project-start-chart" class="chart-content"></div>
        </div>
    </div>
</template>

<script>
import { rectchart,cycledrow } from '@/utils/chart.js';
import { getProjectStart } from '@/api/index.js';
export default {
    name: '',
    components:{
      
    },
    props:{
        year: {
            type: String
        }
    },
    data() {
        return {
            
        }
    },
    watch:{
        year(val, oldVal){
            this.getTableData();
        }
    },
    mounted(){
        var _this=this;
        this.$nextTick(function(){
            this.getTableData();
            cycledrow('project-start-chart',function(){
                _this.getTableData();
            });
        });
    },
    methods: {
        getTableData(){
            var _this=this;
            getProjectStart({
                year:this.year
            }).then(res => {
                if(res.code==200){
                    var data=res.data;
                    _this.resetData(data);
                }
                return;
            }).catch(err => {
                console.log(err);
            });
        },
        resetData(arr){
            var xdata=[];
            var ydata=[];
            for(var i=0;i<arr.length;i++){
                var item=arr[i];
                xdata.push(item.name);
                var value=parseInt(item.value);
                ydata.push(value);
                if(i==arr.length-1){
                    //console.log(xdata,ydata);
                    this.rectChartInit(xdata,ydata);
                }
            }
        },
        rectChartInit(xdata,ydata){
            var data={
                id:'project-start-chart',
                label:xdata,
                data:[{
                    label: "各区项目启动率",
                    data:ydata
                }]
            }
            rectchart(data);
        }
    }
}
</script>

<style scoped>
.chart-container{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
}
.chart-content-wrapper{
    flex:1;
    width:100%;
    display: flex;
}
.chart-content{
    flex:1;
    padding:15px;
}
.chart-title-wrapper{
    width:97%;
    margin:0 auto;
    height:80px;
    display:flex;
    justify-content: space-between;
    position:relative;
}
.chart-title-block{
    width: 255px;
    height: 38px;
    background: linear-gradient(90deg, #05FCFC 0%, #171B26 100%);
    opacity: 0.28;
    position:relative;
    left:30px;
    top:35px;
}
.chart-title{
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #01F4F5;
    line-height: 33px;
    letter-spacing: 3px;
    position: absolute;
    top:36px;
    left:39px;
    white-space: nowrap;
}
echarts {
    width: 100%;
    height: 100%;
}
</style>


